import React,{useEffect} from 'react'
import { Button } from 'antd';
import { useNavigate } from 'react-router-dom';
import './css/login.scss'
import axios from 'axios';
import {  message } from 'antd';
export default function Login() {
  
  useEffect(()=>{
    // if (!window.hasRefreshed) {
    //   window.hasRefreshed = true;
    //   window.location.reload();
    // }
  },[])
  
  
  const [messageApi, contextHolder] = message.useMessage();
  let navigate = useNavigate()
  let [phone, setPhone] = React.useState('')
  let hqyzm=async()=>{
    console.log(phone);
    if(phone.length===11){
      sessionStorage.phone=phone
      let {data}=await axios.post(`http://localhost:3000/users/sjh`,{phone})
      console.log(data);
      sessionStorage.token=data.token
      navigate('/yzm')
    }else{
      messageApi.open({
        type: 'error',
        content: '请输入正确的手机号',
      });
    }
    
  }
  return (
    <div id='login'>
      {/* 头部 */}
      {contextHolder}
      <div className='header'>
        <div onClick={()=>{navigate('/reader')}}>
          X
        </div>
        <div style={{ fontSize: '15px' }} onClick={()=>{navigate('/login2')}}>
          密码登录
        </div>
      </div>
      {/* 登录方式 */}
      <div style={{ height: '7vh' }}></div>
      <div className='login-way' style={{ lineHeight: '3vh', fontSize: '3vh' }}>
        账号登录
      </div>
      <div style={{ height: '5vh' }}></div>
      {/* 登录 */}
      <div className='dl'>
        <div style={{ padding: 2, width: '20%' }}>+86</div>
        <input type="text" placeholder='请输入手机号' value={phone} onChange={(e)=>{setPhone(e.target.value)}} />
      </div>
      {/* 获取验证码 */}
      <div style={{height:'2vh'}}></div>
      <div style={{ width: '82%', margin: '0 auto'}}>
        <Button type="primary" onClick={hqyzm} style={{ fontSize:'20px',lineHeight:'20px',height:'50px'}} block>
          获取验证码
        </Button>
      </div>
      <div style={{padding:'10px 30px',fontSize:'12px',color:'#C4A699'}}>
      未注册手机验证后自动登录
      </div>


      <div style={{textAlign:'center',color:'#367CFD'}} onClick={()=>{navigate('/rldl')}}>
          人脸登录
      </div>
      {/* 底部 */}
      <div style={{textAlign:'center',position:'absolute',bottom:'1vh',width:'100%'}}>
        <div style={{textAlign:'center',width:'100%'}}>
        注册即代表你同意<span style={{ color: '#007fff' }} >《用户协议》</span>和 <span style={{ color: '#007fff' }} >《隐私保护指引》</span>
        </div>
      </div>
    </div>
  )
}
